import { CustomTitle } from "@/components/customTitle";
import {
  PaddingContent,
  PaddingContentMobileMobile,
} from "@/components/page-padding";
import { useResponsive } from "@/hooks/useResponsive";
import userStore from "@/store/userStore";
import { Card } from "antd";
import styled from "styled-components";
import { pText } from "./utils";

const PCard = styled(Card)`
  padding: 40px;
  border-radius: 20px;
  border: 1px solid #e1e1e1;
  box-shadow: 0px 2px 8px 0px #4444441a;
  margin-bottom: 80px;
  color: #545454;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
`;

const Teams = () => {
  const { lpnData, identityData, bookingData } = userStore();
  const identApprovalStatus = identityData.approvalStatus;

  console.log(identApprovalStatus, "identApprovalStatus");

  const PaddingWrapper: React.FC<{ children: React.ReactNode }> = ({
    children,
  }) => {
    const { isMobile } = useResponsive();
    if (isMobile) {
      return (
        <PaddingContentMobileMobile>{children} </PaddingContentMobileMobile>
      );
    } else {
      return <PaddingContent>{children} </PaddingContent>;
    }
  };

  console.log(
    lpnData,
    "lpnData",
    identityData,
    "---identityData",
    bookingData,
    "_____bookingData"
  );
  return (
    <PaddingWrapper>
      <>
        <CustomTitle>Terms & Conditions</CustomTitle>
        <PCard>{pText}</PCard>
      </>
    </PaddingWrapper>
  );
};

export default Teams;
